<template>
  <view class="page-jobitem">
    <view class="page-jobitem-mianshi color-green" v-if="data.scene == 'D'">模拟</view>
    <view class="page-jobitem-name flex-row align-items-center">
      <view class="f-18 bold flex-1">{{data.job_name}}</view>
      <view class="f-12">
        <view></view>
        <view v-if="data.state == 2" class="color-green page-jobitem-stats flex-row align-items-center f-14 bold">
          <text class="page-jobitem-statstext page-jobitem-successtext mr-8"></text>
          面试中
        </view>
        <view v-if="data.state == 0" class="red-color page-jobitem-stats flex-row align-items-center f-14 bold">
          <text class="page-jobitem-statstext page-jobitem-dangertext mr-8"></text>
          已拒绝
        </view>
      </view>
    </view>
    <view class="page-jobitem-company f-14 mt-24 gray-color6">{{data.company_name}}</view>
    <view class="page-jobitem-endtime flex-row f-14 mt-16" v-if="data.scene != 'D'">
      <view class="gray-color6">截止日期:</view>
      <view class="gray-color6">{{data.deadlineCn}}</view>
    </view>
    <view class="page-jobitem-option mt-32 flex-row align-items-center justify-center">
      <view v-if="data.state == null && data.scene != 'D'" class="mr-12"><pk-btn size="small" type="success" @click="handlerAccept(1)">接受</pk-btn></view>
      <view v-if="data.state == null && data.scene != 'D'" class="mr-12"><pk-btn size="small" type="danger" @click="handlerAccept(0)">拒绝</pk-btn></view> 
      <view v-if="data.state == 1 && data.scene != 'D'" class="mr-12"><pk-btn size="small" type="success" @click="hanlderOpen">开启面试</pk-btn></view> 
      
      <view v-if="data.state>=3 && data.scene != 'D'" class="mr-12"><pk-btn size="small" type="danger">面试结束</pk-btn></view> 
      <view v-if="data.scene == 'D'" class="mr-12">
        <pk-btn size="small" type="success" @click="showDetail">查看报告</pk-btn>
      </view> 
      <!-- <view v-if="data.state == 0 " class="mr-12"><pk-btn size="small" type="danger">已拒绝</pk-btn></view>  -->
    </view>
    <view class="page-jobitem-footerfile mt-24">
      <view class="f-12 page-jobitem-footerfilebtn" v-if="data.scene != 'D'">
        <view class="page-jobitem-footerfileicon"></view>
        <view class="f-14" @click="uploadResume"> 
          <text v-if="data.attachment_id || ISREMAR">附件:已上传</text> 
          <text v-else>附件:请选择</text>
        </view>
      </view>
    </view>
    <pk-popup v-if="isShow" @onClose="onClose">
      <view style="overflow: hidden; width: 80vw; padding: 32rpx" >        
        <view v-for="(a, index) in list" :key="index" class="mb-24" @click="selUpload(a)">
          <view class="flex-row align-items-center space-between">
            <view class="f-12 bold">{{a.alias || a.filename}}</view>
            <view class="flex-row align-items-center justify-center">
              <pk-btn size="mini">选择</pk-btn>
            </view>
          </view>
          <view class="f-12 mt-8 gray-color">
            {{a.createdAt}}
          </view>
        </view>
        <!-- <view class="page-jobitem-loading" v-if="ISLOADING">
          <pk-loading text="请求中..."></pk-loading>
        </view> -->
      </view>
    </pk-popup>  
  </view>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
import { invitationOperate, selectAttachment, generateSession } from '@/api/api'
const emits = defineEmits(['onEmit'])
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  list: {
    type: Array,
    default: () => []
  }
})
const isShow = ref(false)
const ISREMAR = ref(false)
const ISLOADING = ref(false)
const linkPath = ref('')
const isInterview = ref(false)
  const uploadResume = () => {
    if (props.list.length < 1) {
      uni.showToast({
        title: '目前没有上传简历，请到我的简历先上传',
        icon: 'none',
        duration: 3000
      });
      return
    }
    isShow.value = true
  }

  const selUpload = (e) => {
    ISLOADING.value = true
    // isShow.value = false
    uni.showLoading({
      title: '加载中',
      mask: true
    });
    selectAttachment({
      attachment_id: e.attachment_id,
      interview_id: props.data.interview_id
    }).then(res => {
      uni.hideLoading()
      ISLOADING.value = false
      ISREMAR.value = true
      isShow.value = false 
    }).catch(err => {
      uni.hideLoading()
    })
  } 
  // 开启面试
  const hanlderOpen = () => {
    if (!ISREMAR.value && !props.data.attachment_id) {
      uni.showToast({
        title: '请选择附件',
        icon: 'none',
        duration: 2000
      });
      return
    }

    generateSession({
      scene: "A",
      channel_id: props.data.interview_id
    }).then(res => {
      gominashi(res.data)
    }) 

  }

const showDetail = () => {
  uni.navigateTo({
    url: '/pages/markdown/index?id=' + props.data.interview_id
  });
}
const onClose = () => {
  isShow.value = false
}
const gominashi = (e) => {
  uni.navigateTo({
    url: '/pages/webview/index?weburl=' + encodeURIComponent(e)
  });
}  

const handlerAccept = (e) => {
  invitationOperate({
    interview_id: props.data.interview_id,
    is_accept: e
  }).then(res => {
    emits('onEmit')
  })
}
</script>

<style lang="scss" scoped>
.page-jobitem{
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  position: relative;
  &-mianshi{
    position:absolute;
    top:16rpx;
    right:16rpx;
    font-size:24rpx;
    &::after{
      content: '';
      position:absolute;
      width:160rpx;
      height:1rpx;
      background:#eee;
      left:-75rpx;
      top:40rpx;
      transform: rotateZ(45deg);
    }
  }
  &-loading{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba($color: #ffffff, $alpha: 0.7);
    z-index: 1000;
    border-radius: 12px;
  }
  &-name{
    
  }
  &-footerfile{
    display: flex;
    flex-direction: row;
  }
  &-footerfileicon{
    width: 30rpx;
    height: 44rpx;
    background: url("@/static/fileicon.png") center center no-repeat;
    background-size: 30rpx auto;
    border-radius: 44rpx;
  }
  &-footerfilebtn{
    display: flex;
    border-radius: 32rpx;
    // border:#ebebeb 1px solid;
    font-size: 24rpx;
    height: 44rpx;
    line-height: 44rpx;
    // padding: 0 16rpx;
  }
  &-stats{
    position: relative;
    padding-left: 20rpx;
  }
  &-statstext{
    width: 8rpx;
    height: 8rpx; 
    border-radius: 8rpx;
    // position: absolute;
    // top:50%;
    // left:0;
    // margin-top: -4rpx;
  }
  &-successtext{
    background: #00b4b3;
  }
  &-dangertext{
    background: #cd2424;
  }
}
</style>